<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>2_生命周期(旧)</title>
</head>

<body>
<div id="test"></div>

<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>

<script type="text/babel">
    //创建组件
    class Count extends React.Component {

        //构造器
        constructor(props) {
            super(props);
            console.log("Count constructor")
            this.state = {count: 0}
        }

        //初始化渲染、状态更新之后
        render() {
            const {count} = this.state
            console.log("Count render")
            return (
                <div>
                    <h2>当前求和为{count}</h2>
                    <button onClick={this.add}>点我加1</button>
                    <button onClick={this.death}>卸载组件</button>
                    <button onClick={this.force}>不更改数据，强制更新</button>
                </div>
            )
        }

        //组件将要挂载的钩子
        componentWillMount() {
            console.log("Count --- componentWillMount");
        }


        //组件挂载完毕的勾子
        componentDidMount() {
            console.log("Count --- componentDidMount");
        }


        //组件将要卸载的勾子
        componentWillUnmount() {
            console.log("Count --- componentWillUnmount");
        }

        //控制组件更新的‘阀门’
        shouldComponentUpdate() {
            console.log("Count --- shouldComponentUpdate");
            return false;
        }

        //组件将要更新的勾子
        componentWillUpdate() {
            console.log("Count --- componentWillUpdate");
        }

        //组件已经更新的勾子
        componentDidUpdate() {
            console.log("Count --- componentDidUpdate");
        }

        //数据加一按钮的回调
        add = () => {
            //获取原来状态
            const {count} = this.state;
            //状态+1
            this.setState({count: count + 1});
        }

        //卸载组件按钮的回调
        death = () => {
            ReactDOM.unmountComponentAtNode(document.getElementById('test'));

        }

        //强制更新按钮的回调
        force = () => {
            this.forceUpdate();
        }

    }

    //父A
    class A extends React.Component {
        //初始化状态
        state = {carName: "奔驰"}

        //换车
        changeCar = () => {
            this.setState({carName: "奥拓"});
        }

        render() {
            return (
                <div>
                    <div>A</div>
                    <button onClick={this.changeCar}>换车</button>
                    <B carName={this.state.carName}/>
                </div>
            )
        }
    }
    //子B
    class B extends React.Component {

        //组件将要接收新的props的勾子
        componentWillReceiveProps(props) {
            //第一次传的props不算
            console.log("B --- componentWillReceiveProps", props);
        }

        shouldComponentUpdate() {
            console.log("B --- componentWillReceiveProps");
            return true;
        }

        //组件将要更新的勾子
        componentWillUpdate() {
            console.log("B --- componentWillUpdate");
        }

        //组件已经更新的勾子
        componentDidUpdate() {
            console.log("B --- componentDidUpdate");
        }

        render() {
            console.log("B --- render");
            return (
                <div>
                    <div>B ，接收的车是{this.props.carName}</div>
                </div>
            )
        }
    }

    //渲染组件
    ReactDOM.render(<A/>, document.getElementById('test'));

</script>
</body>

</html>
